<template>
  <div class="search">
    <div class="header">
      <search @on-submit='submit'
              @on-cancel='$router.push("/")'
              v-model="value"
              ref="search"
              auto-fixed
              placeholder='请输入名称'
              cancel-text='取消'></search>
    </div>
    <div class="history ">
      <div class="tit flex between">
        <span class="fwb fz28">历史搜索</span>
        <img @click="del"
             src="../../assets/image/del.png">
      </div>
      <ul class="history_list flex start wrap">
        <li v-for="(item, index) in historyList"
            :key="index"
            @click="result(item)">{{item}}</li>
      </ul>
    </div>
  </div>

</template>
<script>
import { Search } from 'vux'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    Search
  },
  data () {
    return {
      value: '',
      historyList: []

    }
  },
  computed: {
    ...mapGetters([
      'searchList'
    ])
  },
  methods: {
    ...mapActions(['initSearch']),
    submit () {
      if (this.value) {
        this.historyList.push(this.value)
        this.initSearch(this.historyList)
        this.$router.push({ path: '/searchResult', query: { hotelName: this.value } })
      }
    },
    result (val) {
      this.$router.push({ path: '/searchResult', query: { hotelName: val } })
    },
    del () {
      this.historyList = []
      this.initSearch(this.historyList)
    }
  },
  created () {
    if (this.searchList) {
      this.historyList = this.searchList
    }
  },
  mounted () {
  }

}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.history {
  position: fixed;
  top: 70px;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  .tit {
    img {
      width: 35px;
      height: 40px;
    }
  }
  .history_list {
    // padding: 20px 0;
    li {
      padding: 5px 20px;
      background-color: #f2f2f2;
      @extend .border;
      margin: 10px 15px 15px 0;
    }
  }
}
</style>
